{% extends 'base.html' %}

{% block title %}学生控制面板{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">欢迎回来，{{ session.get('username') }}</h1>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">概览</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-journal-text"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">已完成练习</h6>
                                    <h3 class="mb-0">{{ exercises_data|length }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-graph-up"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">学习路径</h6>
                                    <h3 class="mb-0">{{ learning_paths|length }}</h3>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <span class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                        <i class="bi bi-book"></i>
                                    </span>
                                </div>
                                <div>
                                    <h6 class="mb-0">推荐内容</h6>
                                    <h3 class="mb-0">{{ recommendations|length }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近学习进度 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">最近学习进度</h5>
                </div>
                <div class="card-body">
                    {% if exercises_data %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>练习</th>
                                        <th>完成时间</th>
                                        <th>分数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for exercise_data in exercises_data[:5] %}
                                        {% set exercise = exercise_data.exercise %}
                                        <tr>
                                            <td>{{ exercise.title }}</td>
                                            <td>{{ exercise_data.completion_time.strftime('%Y-%m-%d %H:%M') }}</td>
                                            <td>
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ exercise_data.score }}%;" aria-valuenow="{{ exercise_data.score }}" aria-valuemin="0" aria-valuemax="100">{{ exercise_data.score }}%</div>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div class="text-end">
                            <a href="{{ url_for('student_analytics') }}" class="btn btn-sm btn-outline-primary">查看全部 &rarr;</a>
                        </div>
                    {% else %}
                        <p class="text-muted">暂无学习记录。开始做练习来跟踪您的进度！</p>
                        <a href="{{ url_for('student_exercises') }}" class="btn btn-primary">开始练习</a>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <!-- 推荐学习内容 -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">教师推荐</h5>
                </div>
                <div class="card-body">
                    {% if recommendations %}
                        <ul class="list-group list-group-flush">
                            {% for recommendation in recommendations[:3] %}
                                <li class="list-group-item px-0">
                                    <p class="mb-1">{{ recommendation.content }}</p>
                                    <small class="text-muted">{{ recommendation.created_at.strftime('%Y-%m-%d') }}</small>
                                </li>
                            {% endfor %}
                        </ul>
                        {% if recommendations|length > 3 %}
                            <div class="text-end mt-3">
                                <a href="#" class="btn btn-sm btn-outline-info">查看全部 &rarr;</a>
                            </div>
                        {% endif %}
                    {% else %}
                        <p class="text-muted">暂无推荐内容。</p>
                    {% endif %}
                </div>
            </div>
            
            <!-- 快速链接 -->
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="card-title mb-0">快速链接</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('student_learning_paths') }}" class="btn btn-outline-primary">个性化学习路径</a>
                        <a href="{{ url_for('student_ai_qa') }}" class="btn btn-outline-primary">智能问答</a>
                        <a href="{{ url_for('student_exercises') }}" class="btn btn-outline-primary">练习</a>
                        <a href="{{ url_for('student_analytics') }}" class="btn btn-outline-primary">数据分析</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
{% endblock %} 